<template>
	<view class="chatContext">
		<uni-notice-bar showClose="false" showIcon class="flyNoticeBar"  single="true" :text="noticeContent"></uni-notice-bar>
		<uni-table emptyText="暂无更多数据"  class="visitorNotice">
			    <uni-tr style="visibility: hidden;">
			        <uni-th  width="80">属性</uni-th>	
			        <uni-th >内容</uni-th>
			    </uni-tr>
			<uni-tr align="left"  v-for="item in visitorExtra">
				<uni-td>{{item.key}}</uni-td>
				<uni-td>{{item.val}}</uni-td>
			</uni-tr>
		</uni-table>
		<view class="flyNotice" v-show="messages.length==0">暂无消息记录</view>
		<view class="chatTime" v-on:click="getMessages" v-show="showLoadMore">{{moremessage}}</view>
		<view class="chatBox">
			<view v-for="v in messages" v-bind:class="{'chatBoxMe': v.mes_type=='kefu'}">
				<view class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}">{{formatTime(v.time)}}</view>
				<view class="chatLittle">
					<image class="flyAvatar" :src="v.avator"></image>
				</view>
				<view class="chatBig">
					<view class="chatUser">{{v.name}}</view>
					<view class="chatContent"  >
						<mp-html :content="v.content" :selectable="true"/>
					</view>
					<view class="chatReadStatus" v-show="v.mes_type=='kefu'">{{v.read_status}}</view>
					<view class="deleteMessage" v-show="v.mes_type=='kefu'"  @click="longDelete(v.msg_id)">撤回</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<uni-popup ref="remark" :mask-click="false" background-color="#fff">
			<view class="remarkDialog">
				<uni-forms>
					<uni-easyinput class="mt-10" type="text" v-model="realName"  placeholder="姓名" />
					<uni-easyinput class="mt-10" type="text"  v-model="tel"  placeholder="手机" />
					<uni-easyinput class="mt-10" type="text"  v-model="wechat"  placeholder="微信" />
					<uni-easyinput class="mt-10" type="text"  v-model="qq"  placeholder="QQ" />
					<uni-easyinput class="mt-10" type="text"  v-model="email"  placeholder="邮箱" />
					<uni-easyinput class="mt-10" type="textarea"  v-model="comment"  placeholder="备注"/>
				</uni-forms>
				<button type="primary" @click="saveRemark" class="mt-10">保存</button>
				<view class="mt-10">
					<uni-tag @click="delTag(visitorTag.tag_name)" class="mr-10 mt-10" type="primary" :text="visitorTag.tag_name" v-for="visitorTag in visitorTags"></uni-tag>
					<uni-data-picker class="mt-10" :localdata="entTags" popup-title="请选择标签" @change="changeTag"></uni-data-picker>
					<uni-easyinput class="mt-10" type="text"  v-model="tagName"  placeholder="新标签" @blur="doChangeTag(tagName)"/>
				</view>
				<button @click="closeRemark" class="mt-10">关闭</button>
			</view>
		</uni-popup>
		<uni-popup  ref="fastReply" :mask-click="false" background-color="#fff" type="dialog">
			<scroll-view scroll-y="true" class="replyDialog">
				<view class="remarkDialog">
					<uni-collapse accordion>
						<uni-collapse-item :title="reply.group_name"  v-for="reply in replys" @click="messageContent=replyItem.item_content;closeFastReply()">
							<view  class="replyBox" @click="messageContent=replyItem.item_content;closeFastReply()"  v-for="replyItem in reply.items">
								<view class="replyTitle">{{replyItem.item_name}}</view>
								<view class="replyContent"><mp-html :preview-img="false" :content="replyItem.item_content" /></view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<button @click="closeFastReply" class="mt-10">关闭</button>
				</view>

			</scroll-view>
		</uni-popup>
		
		<view class="chatBoxSend">
			<view class="inputing" v-show="inputingAction!=''">{{inputingAction}}</view>
			<view class="chatBoxSendIcons">
				<uni-icons class="mr-10" v-on:click="uploadImage" type="image" size="30" color="#8b8b8b"></uni-icons>
				<uni-icons class="mr-10" v-on:click="showRecorder=true" type="mic" size="30" color="#8b8b8b"></uni-icons>
				<uni-icons class="mr-10" v-on:click="openRemark" type="compose" size="30" color="#8b8b8b"></uni-icons>
				<uni-icons class="mr-10" v-on:click="trashMessage" type="trash-filled" size="30" color="#8b8b8b"></uni-icons>
				<uni-icons class="mr-10" v-on:click="openFastReply" type="list" size="30" color="#8b8b8b"></uni-icons>
			</view>
			<textarea :auto-height="true" :adjust-position="true" maxlength="-1" class="chatArea" v-on:click="readMessages" v-model="messageContent" v-on:keyup.enter.native="chatToUser" placeholder="请输入信息"></textarea>
			<view class="btnArea">
				<button v-on:click="chatToUser" type="primary">发送</button>
			</view>
			<sound-recording v-on:cancel="showRecorder=false"  v-on:confirm="confirm" v-if="showRecorder"></sound-recording>
		</view>
	</view>

</template>

<script>
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import toolsHelper from '../../common/tools.js';

	export default {
		components: {soundRecording},
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				wsBaseUrl: getApp().globalData.wsBaseUrl,
				kefuInfo:{
					avator:"",
					nickname:"",
					username:""
				},
				messages: [],
				messageContent: "",
				sendDisabled: false,
				token: "",
				visitor_id: "",
				visitorExtra:[],
				visitor_name: "",
				isDisabled: false,
				area: "",
				showArea: false,
				scrollSize: 2,
				faceTitles : ["[a]", "[b]", "[c]", "[d]", "[e]", "[f]", "[g]", "[h]", "[i]", "[j]", "[k]", "[l]", "[m]", "[n]", "[o]", "[p]", "[q]", "[r]", "[s]", "[t]", "[u]", "[v]", "[w]", "[x]", "[y]", "[z]", "[aa]", "[bb]", "[cc]", "[dd]", "[ee]", "[ff]", "[gg]", "[hh]", "[ii]", "[jj]", "[kk]", "[ll]", "[mm]", "[nn]", "[oo]", "[pp]", "[qq]", "[rr]", "[ss]", "[tt]", "[uu]", "[vv]", "[ww]", "[xx]", "[yy]", "[zz]", "[a1]", "[b1]", "[good]", "[NO]", "[c1]", "[d1]", "[e1]", "[f1]", "[g1]", "[h1]", "[i1]", "[g1]", "[k1]", "[l1]", "[m1]", "[n1]", "[o1]", "[p1]", "[q1]", "[cake]"],
				noticeContent:"通知: 无",
				currentPage:1,
				loadMoreDisable:false,
				showLoadMore:false,
				inputingAction:"",
				moremessage:"点击加载更多记录",
				showRecorder:false,
				realName:"",
				tel:"",
				wechat:"",
				qq:"",
				email:"",
				comment:"",
				replys:[],
				visitorTags:[],
				entTags:[],
				tagName:"",
				messageExist:[],
				Loop:null,
			}
		},
		// 页面显示
		onLoad(options) {
			var res = uni.getStorageSync('app');
			if (res) {
				this.token = res.token;
			}
			let domainInfo = uni.getStorageSync('domain');
			if (domainInfo) {
				this.baseUrl = domainInfo.domain;
				this.wsBaseUrl=toolsHelper.getWsUrl(domainInfo.domain);
			}
			
			this.visitor_id = options.visitor_id;

			this.getKefuInfo();
			this.getVisitor();
			this.currentPage=1;
			this.messages=[];
			this.getMessages();
		},
		onShow() {
			this.checkAuth();
			var temp=this.currentPage;
			this.currentPage=1;
			this.getMessages();
			this.currentPage=temp;
			this.readMessages()
		},
		methods: {
			getVisitor() {
				var baseUrl = this.baseUrl;
				var _this = this;
				uni.request({
					url: baseUrl + '/kefu/visitor?visitorId=' + this.visitor_id + '&token=' + _this.token,
					method: 'GET',
					success: function(res) {
						var code = res.data.code;
						if (code == 200) {
							_this.visitor_name = res.data.result.name;
							uni.setNavigationBarTitle({
								title: _this.visitor_name
							});
							var temp={key:'标题',val:res.data.result.refer}
							_this.visitorExtra.push(temp);
							_this.visitorExtra.push({key:'IP地址',val:res.data.result.client_ip});
							_this.visitorExtra.push({key:'操作系统',val:res.data.os_version});
							_this.visitorExtra.push({key:'浏览器',val:res.data.browser});
							_this.visitorExtra.push({key:'首次访问',val:res.data.create_time});
							_this.visitorExtra.push({key:'上次访问',val:res.data.last_time});
							if(res.data.result.extra!=""){
								var b = new Buffer(res.data.result.extra, 'base64')
								var s3 = b.toString('utf8');
								var extra=JSON.parse(s3);
								if (typeof extra=="string"){
									extra=JSON.parse(extra);
								}
								for(var key in extra){
									if(extra[key]==""){
										extra[key]="无";
									}
									if(key=="visitorAvatar"||key=="visitorName"||key=="visitorProduct") continue;
									var temp={key:key,val:extra[key]}
									_this.visitorExtra.push(temp);
								}
							}
						}
					}
				});
			},
			readMessages(){
				uni.request({
					url: this.baseUrl + '/kefu/messages_read?token='+this.token,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data:{
						visitor_id:this.visitor_id,
					},
					success: function(res) {
					}
				});
			},
			getMessages() {
				var _this=this;
				var pagesize=10;
				// if(_this.currentPage<=1){
				// 	pagesize=5;
				// }
				if(_this.loadMoreDisable){
					return;
				}
				uni.showLoading({
					title: "加载中..."
				});

				this.moremessage="加载中";
				this.loadMoreDisable=true;
				uni.request({
					url: this.baseUrl + '/kefu/messages_page' ,
					method: 'GET',
					data:{
						pagesize:pagesize,
						page:_this.currentPage,
						visitor_id:_this.visitor_id,
						token:_this.token,
					},
					success: function(res) {
						uni.hideLoading();
						var messages = res.data.result.list;
						var len=messages.length;
						if(len<=0){
							_this.showLoadMore=false;
							return;
						}else if(len<pagesize){
							_this.showLoadMore=false;
						}else{
							_this.showLoadMore=true;
						}
						
						for (var i in messages) {
							var item=messages[i];
							var visitorMes=[];
							visitorMes = messages[i];
							visitorMes.avator=toolsHelper.getImageUrl(visitorMes.avator,_this.baseUrl);
							visitorMes.content = _this.replaceContent(visitorMes["content"], _this.baseUrl);
							if(!_this.messageExist["id_"+visitorMes.msg_id]){
								_this.messages.unshift(visitorMes);
								_this.messageExist["id_"+visitorMes.msg_id]=1;
							}
							if (visitorMes.read_status== "read") {
								visitorMes.read_status = "已读";
							} else {
								visitorMes.read_status = "未读";
							}
						}
						
		
						if(_this.currentPage<=1){
							setTimeout(function() {
								_this.pageScrollToBottom();
							}, 1000);
						}
						_this.currentPage++;
						_this.moremessage="点击加载更多记录";
						_this.loadMoreDisable=false;
					}
				});
			},
			checkAuth() {
				var _this = this;
				uni.request({
					url: _this.baseUrl + '/uc/v1/refreshToken?token=' + _this.token,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						var code = res.data.code;
						if (code != 20000) {
							uni.navigateTo({
								url: '/pages/index/login'
							});
						} else {
							uni.setStorageSync("app", {
								token: res.data.result.token,
							});
							_this.onlineIntime();
						}
					}
				});
			},
			getKefuInfo() {
				var _this = this;
				uni.request({
					url: _this.baseUrl + '/kefu/kefuinfo?token=' + _this.token,
					method: 'GET',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						var code = res.data.code;
						var result = res.data.result;
						_this.kefuInfo.avator=result.avator;
						_this.kefuInfo.username=result.name;
						_this.kefuInfo.nickname=result.nickname;
					}
				});
			},
			//用户实时上下线
			onlineIntime() {
				let _this = this;
				var timer = null;
				console.log(this.wsBaseUrl + "?token=" + this.token);
				uni.connectSocket({
					url: this.wsBaseUrl + "?token=" + this.token,
				});
				uni.onSocketClose((res) => {
				});
				uni.onSocketOpen((res) => {
					let _this = this;
					let mes = {}
					mes.type = "ping";
					mes.data = "";
					timer = setInterval(function() {
						uni.sendSocketMessage({
							data: JSON.stringify(mes),
						});
					}, 5000)
				});
				uni.onSocketMessage((res) => {
					var redata = JSON.parse(res.data);
					switch (redata.type) {
						case "message":
							_this.recvMessage(redata.data);
							break;
						case "inputing":
							if (redata.data.from != _this.visitor_id) {
								return;
							}
							if (redata.data.content != "") {
								_this.inputingAction="正在输入:"+redata.data.content
							}else{
								_this.inputingAction="";
							}
							uni.setNavigationBarTitle({
								title: "[在线]:" + _this.visitor_name
							});

							break;
						case "read":
							if (redata.data.visitor_id == _this.visitor_id) {
								for(var i=0;i<this.messages.length;i++){
									this.$set(this.messages[i],'read_status',"已读");
								}
							}
							break;
						case "userOffline":
							_this.showNoticeBar(redata.data.name + "离线");
							if (redata.data.visitor_id != _this.visitor_id) {
								return;
							}
							uni.setNavigationBarTitle({
								title: "[离线]:" + _this.visitor_name
							});
							break;
						case "userOnline":
							toolsHelper.playVoice();
							_this.showNoticeBar(redata.data.username + "来了");
							if (redata.data.visitor_id != _this.visitor_id) {
								return;
							}
							uni.setNavigationBarTitle({
								title: "[在线]:" + _this.visitor_name
							});
							break;
					}
				});


			},
			recvMessage(msg) {
				var _this = this;
				if (msg.id != this.visitor_id) {
					this.showNoticeBar(msg.name + ":" + msg.content);
					return;
				}
				// if(msg.is_kefu == "yes"){
				// 	return;
				// }
				toolsHelper.playVoice();
				msg.mes_type = msg.is_kefu == "yes" ? "kefu" : "visitor";
				msg.content = _this.replaceContent(msg.content, _this.baseUrl);
				msg.avator=toolsHelper.getImageUrl(msg.avator,_this.baseUrl);
				this.messageExist["id_"+msg.msg_id]=1;
				this.messages.push(msg);
	
				_this.pageScrollToBottom();
				
				if(msg.mes_type=="visitor"){
					_this.inputingAction="";
				}
			},
			pageScrollToBottom: function() {
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 99999999999999999
					})
				});
			},
			placeFace() {
				var faces = [];
				for (var i = 0; i < this.faceTitles.length; i++) {
					faces[this.faceTitles[i]] = "/static/images/face/" + i + ".png";
				}
				return faces;
			},
			replaceContent(content, baseUrl) { // 转义聊天内容中的特殊字符
				if (typeof baseUrl == "undefined") {
					baseUrl = "";
				}
				var faces = this.placeFace();
				var _this=this;
				content=content.replace(/face\[([^\s\[\]]+?)\]/g, function (face) {  // 转义表情
				            var alt = face.replace(/^face/g, '');
				            return '<img alt="' + alt + '" title="' + alt + '" src="'+baseUrl + faces[alt] + '">';
				        })
				        .replace(/img\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
				            var src = face.replace(/^img\[/g, '').replace(/\]/g, '');
							var imgUrl=toolsHelper.getImageUrl(src,_this.baseUrl);
				            return '<img class="chatImagePic"  src="' +imgUrl + '?width=400"/>';
				        })
				        .replace(/audio\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
				            var src = face.replace(/^audio\[/g, '').replace(/\]/g, '');
							var imgUrl=toolsHelper.getImageUrl(src,_this.baseUrl);
				            return '<audio controls ref="audio" src="'+imgUrl+'" id="audio"></audio>';
				        })
				        .replace(/file\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
				            var src = face.replace(/^file\[/g, '').replace(/\]/g, '');
							var imgUrl=toolsHelper.getImageUrl(src,_this.baseUrl);
							var iconUrl=toolsHelper.getImageUrl('/static/images/download.png',_this.baseUrl);
				            return '<a href="'+imgUrl+'"><img src="'+iconUrl+'"/></a>';
				        })
				        .replace(/\[([^\]]+?)\]+link\[([^\]]+?)\]/g, function (face) {  // 转义超链接
				            var text = face.replace(/link\[.*?\]/g, '').replace(/\[|\]/g, '');
				            var src = face.replace(/^\[([^\s\[\]]+?)\]+link\[/g, '').replace(/\]/g, '');
				            return '<a href="'+src+'" target="_blank"/>'+text+'</a>';
				        })
						.replace(/product\[([^\[\]]+?)\]/g, function (product) {
							if(!arguments[1]){
								return;
							}
							var jsonStr=arguments[1].replace(/\'/g,'"');
							console.log(jsonStr);
							try{
								var info=JSON.parse(jsonStr);
								if(typeof info=="undefined"){
									return;
								}
								var title="";
								if(info.title){
									title=info.title;
								}
								var price="";
								if(info.price){
									var price=info.price;
								}
								var img="";
								if(info.img){
									img="<img src='"+toolsHelper.getImageUrl(info.img,_this.baseUrl)+"' style='width: 100px;height: 100px;margin-right: 15px;'/>";
								}
								var url="";
								if(info.url){
									url=info.url;
								}
								var html= `
									<a style='display: block;background: #fff;padding: 5px;border-radius: 2px;max-width: 98%;display: flex;border-radius: 5px;' href="`+url+`" target="_blank"/>
									`+img+`
				
									<div style='color: #333;'>
										<div>`+title+`</div>
										<div style='color: #ff7736;font-weight: bold;font-size: 16px;margin-top: 10px;'>`+price+`</div>
									</div>
									</a>
							`;
								return html;
							}catch (e) {
								return jsonStr;
							}
				
						});
				return content;
			},
			//发送给客户
			chatToUser() {
				var _this = this;
				this.messageContent = this.messageContent.trim("\r\n");
				if (this.messageContent == "" || this.messageContent == "\r\n" || this.currentGuest == "") {
					uni.showModal({
						content: "内容不能为空"
					});
					return;
				}
				if (_this.isDisabled) {
					return
				}
				uni.showLoading({
					title: "发送中..."
				});
				_this.isDisabled = true;
				// var messages = _this.messages;
				// var msg = {};
				// msg.avator=toolsHelper.getImageUrl(this.kefuInfo.avator,_this.baseUrl);
				// msg.name=this.kefuInfo.nickname;
				// msg.content=_this.replaceContent(this.messageContent, _this.baseUrl);
				// msg.mes_type = "kefu";
				// msg.time=toolsHelper.getNowDate();
				// messages.push(msg);
				uni.request({
					url: _this.baseUrl + '/kefu/message?token='+_this.token,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						to_id: _this.visitor_id,
						content: _this.messageContent,
						type: "kefu",
					},
					success: function(res) {
						_this.isDisabled = false,
							uni.hideLoading();
						var code = res.data.code;
						if (code != 200) {
							uni.showModal({
								content: res.data.msg
							});
						} else {
							_this.messageContent = "";
							// var messages = _this.messages;
							// var msg = res.data.result.data;
							// msg.mes_type = "kefu";
							// messages.push(msg);
							_this.pageScrollToBottom();
						}
					}
				});
			},
			//关闭备注
			closeRemark(){
				this.$refs.remark.close();
			},
			//开启备注
			openRemark(){
				var _this=this;
				uni.request({
					url: this.baseUrl + '/kefu/visitor_attr?token='+_this.token,
					method: 'GET',
					data: {
						visitor_id: _this.visitor_id,
					},
					success: function(res) {
						var result=res.data.result;
						_this.realName=result.real_name;
						_this.tel=result.tel;
						_this.email=result.email;
						_this.qq=result.qq;
						_this.wechat=result.wechat;
						_this.comment=result.comment;
						console.log(res);
					}
				});
				_this.entTags=[];
				uni.request({
					url: this.baseUrl + '/kefu/tags?token='+_this.token,
					method: 'GET',
					success: function(res) {
						var result=res.data.result;
						for(var key in result){
							var item={
								"text":result[key].name,
								"value":result[key].name,
							}
							_this.entTags.push(item);
						}
					}
				});
				this.getTags();
				this.$refs.remark.open();
			},
			//查询tags
			getTags(){
				var _this=this;
				uni.request({
					url: this.baseUrl + '/kefu/visitorTag?token='+_this.token,
					method: 'GET',
					data: {
						visitor_id: _this.visitor_id,
					},
					success: function(res) {
						var result=res.data.result;
						_this.visitorTags=result;
					}
				});
			},
			//关闭快速回复
			closeFastReply(){
				this.$refs.fastReply.close();
			},
			//开启快速回复
			openFastReply(){
				var _this=this;
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.baseUrl + '/replys?token='+_this.token,
					method: 'GET',
					success: function(res) {
						uni.hideLoading();
						var result=res.data.result;
						_this.replys=result;
					}
				});
				this.$refs.fastReply.open();
			},
			saveRemark(){
				var _this=this;
				var info={
					visitor_id:this.visitor_id,
					visitor_attr:{
						real_name:this.realName,
						tel:this.tel,
						email:this.email,
						wechat:this.wechat,
						qq:this.qq,
						comment:this.comment,
					}
				}
				uni.request({
					url: _this.baseUrl + '/kefu/visitor_attrs?token='+_this.token,
					method: 'POST',
			
					data: info,
					success: function(res) {
						_this.$refs.remark.close();
					}
				});
				
			},
			//修改标签
			changeTag(e){
				var _this=this;
				 const value = e.detail.value[0].value;
				 console.log(value);
				this.doChangeTag(value);
			},
			doChangeTag(tagName){
				var _this=this;
				var info={
					visitor_id:this.visitor_id,
									tag_name:tagName
				}
				uni.request({
					url: _this.baseUrl + '/kefu/visitorTag?token='+_this.token,
					method: 'POST',
					data: info,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						_this.getTags();
					}
				});
			},
			//删除标签
			delTag(tagName){
				var _this=this;
				var info={
					visitor_id:this.visitor_id,
					tag_name:tagName
				}
				uni.request({
					url: this.baseUrl + '/kefu/delVisitorTag?token='+_this.token,
					method: 'GET',
					data:info,
					success: function(res) {
						_this.getTags();
					}
				});
			},
			showNotice(msg) {
				// if (uni.getSystemInfoSync().platform == "android") {
				// 	if (window.plus) {
				// 		plus.push.createMessage(msg);
				// 	}
				// }
			},
			showNoticeBar(msg){
				var _this=this;
				_this.noticeContent=msg;
			},
			uploadImage(){
				var _this=this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url:  _this.baseUrl + '/uploadimg?token='+ _this.token,
				            filePath: tempFilePaths[0],
				            name: 'imgfile',
				            success: (res) => {
								console.log(res);
								var data=JSON.parse(res.data)
								_this.messageContent+='img[' + data.result.path + ']';
								_this.chatToUser();
				            }
				        });
				    }
				});
			},
			//格式化时间
			formatTime(time) {
				var timeStamp = Math.round(new Date(time).getTime()/1000);
				var nowTime=Math.round(new Date().getTime()/1000);
				if((nowTime-timeStamp)<=3600*24){
					return toolsHelper.beautifyTime(timeStamp);
				}
				return time;
			},
			//长按事件
			longDelete(msgId) {
				var _this=this;
	　　　　　　uni.showModal({
	　　　　　　　　title: '撤回操作',
	　　　　　　　　content: '请问要撤回本条消息吗？',
	　　　　　　　　success:async function(res) {
	　　　　　　　　　　if (res.confirm) {
						var info={msg_id:msgId,visitor_id:_this.visitor_id}
						uni.request({
							url: _this.baseUrl + '/kefu/message_delete?token='+_this.token,
							method: 'POST',
							data:info,
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: function(res) {
								for(var i=0;i<_this.messages.length;i++){
									if(_this.messages[i].msg_id==msgId){
										_this.messages.splice(i,1);
									}
								}
							}
						});
		　　　　　　　　} else if (res.cancel) {
		　　　　　　　　　　console.log('用户点击取消')
		　　　　　　　　}
	　　　　　　		}
				});
	
			},
			//长按事件
			trashMessage() {
				var _this=this;
	　　　　　　uni.showModal({
	　　　　　　　　title: '清空操作',
	　　　　　　　　content: '请问要清空所有消息吗？',
	　　　　　　　　success:async function(res) {
	　　　　　　　　　　if (res.confirm) {
						var info={visitor_id:_this.visitor_id}
						uni.request({
							url: _this.baseUrl + '/kefu/delVisitorMessage?token='+_this.token,
							method: 'GET',
							data:info,
							success: function(res) {
								_this.messages=[];
							}
						});
		　　　　　　　　}
	　　　　　　		}
				});
			},
			confirm(voicePath){
				var _this=this;
				this.showRecorder=false;
				uni.uploadFile({
				    url:  _this.baseUrl + '/uploadaudio?token='+ _this.token,
				    filePath: voicePath,
				    name: 'realfile',
				    success: (res) => {
						var data=JSON.parse(res.data)
						_this.messageContent+='audio[/' + data.result.path + ']';
						_this.chatToUser();
						
				    }
				});
			}
		}
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
	.flyAvatar {
		display: inline-block;
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		background: #C0C4CC;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 6px;
		margin-top: 5px;
	}
	.chatContent .chatImagePic{
		max-width: 100%!important;
		display: inline-block;
	}
	.chatUser {
		line-height: 24px;
		font-size: 12px;
		white-space: nowrap;
		color: #999;
		text-align: left;
	}

	.chatLittle {
		width: 12.5%;
		float: left;
	}

	.chatBig {
		width: 87.5%;
		float: right;
	}

	.chatBox {
		padding: 0 4px;
	}
	.chatContent a{
		text-decoration: none;
	}
	.chatBoxMe .chatContent {
		float: right;
		background-color: rgb(152, 225, 101);
		border: 1px solid rgb(145, 215, 96);
	}

	.chatBoxMe .chatContent:after {
		border-top-color: rgb(152, 225, 101);
	}

	.chatBoxMe .chatLittle {
		width: 12.5%;
		float: right;
		text-align: right;
	}

	.chatBoxMe .chatUser {
		text-align: right
	}

	.chatBoxMe .chatContent:after {
		left: auto;
		right: -10px;
	}

	.chatContent {
		background-color: rgb(255,255,255);
		color: #000;
		border: 1px solid rgb(242, 242, 242);
		padding: 8px 15px;
		word-break: break-all;
		position: relative;
		border-radius: 5px;
		display: inline-block;
		margin:0px 4px;
	}

	.chatBoxMe .chatContent {
		margin-right: 4px;
	}

	.chatTime {
		text-align: center;
		color: #bbb;
		margin: 5px 0;
		font-size: 12px;
	}

	.chatArea {
		float: left;
		width: calc(100% - 80px);
		height: 38px;
		line-height: 38px;
		border:1px solid #e2e2e2;
		padding: 1px 5px;
		background: #fff;
		border-radius: 4px;
		margin-left: 5px;
	}

	.btnArea {
		float: right;
		margin-right: 5px;
	}
	.btnArea uni-button{
		width: 55px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 13px;
	}
	.chatBoxSendIcons{
		padding:0px 5px;
	}
	.visitorFaceBox {
		position: absolute;
		bottom: 70px;
	}

	.chatBoxSend {
		background: #f9f9f9;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		border-top: 1px solid #eaeaea;
	}

	.chatContext {
		text-align: left;
		position: relative;
		padding: 10px;
		padding-bottom: 95px;
	}
	.visitorNotice{
	}
	.visitorNotice .uni-table{
		background-color: #f5f5f5;
	}
	.visitorNotice .uni-table-td{
		margin-top: 10px;
		font-size: 12px;
		color: #6c6c6c;
		padding: 5px 10px;
	}
	.inputing{
		padding: 2px 4px;
		color: #6c6c6c;
		font-size: 12px;
	}
	.folderBtn {
	    display: inline-block;
	    background-color: transparent;
	    overflow: hidden;
	    font-size: 1px;
	}
	.folderBtn:before {
	    content: '';
	    float: left;
	    background-color: #9da0a0;
	    width: 15px;
	    height: 3px;
	    margin-left: 2px;
	    border-top-left-radius: 2px;
	    border-top-right-radius: 2px;
	    box-shadow: 2px 2px 0 0 #9da0a0;
	}
	.folderBtn:after {
	    content: '';
	    float: left;
	    clear: left;
	    background-color: #d4d6d6;
	    width: 33px;
	    height: 22px;
	    border-radius: 1px;
	}
	.remarkDialog{
		padding: 10px;
	}
	.replyDialog{
		max-width: 100%;
		height: 500px;
	}
	.overflowYauto{
		overflow-y: auto;
	}
	.replyTitle{
		color: #3295fb;
	}
	.replyContent{
		padding: 20px;
	}
	.replyBox{
		margin: 10px 15px;
		border-bottom: 1px dashed #e6e6e6;
		line-height: 22px;
		padding: 5px 0px;
	}
	.clear {
		clear: both;
	}
	.area{
		border: 1px solid #c8c7cc;
		padding: 2px;
	}
	.chatReadStatus {
		font-size: 12px;
		color: #7f7f7f;
		margin: 8px 5px 0px 0px;
		float: right;
	}
	.deleteMessage{
		font-size: 12px;
		color: #f82672;
		margin: 8px 5px 0px 0px;
		float: right;
	}
</style>
